{% extends "level_base.html" %}

{% block form %}
  {% if information %}
    <br/>
    <h4>Instructions:</h4>
    <div>{{ information }}</div>
  {% endif %}
  <h4>Guess my card:</h4><img src='/images/card_back.png'>
  <h4>What is your bet?</h4>
  <form action="/level1" method="post" name="bet_form">
    {% if new_bet %}
      <div id="bet_div"><input type="text" name="bet" value="{{ new_bet }}" /></div>
    {% else %}
      <div id="bet_div"><input type="text" name="bet" value="1" /></div>
    {% endif %}
    <div id="guess_div"><input type="hidden" name="guess" value=-1 /></div>
    <div id="suit_div"><input type="hidden" name="suit" value="{{ suit }}" /></div>
    {% for image in clickable_images %}
      <a href="javascript:document.bet_form.submit()" id={{ forloop.counter0 }} onClick="return updateValue(this.id)"><img src="{{ image }}" border=0></a>
    {% endfor %}
  </form>
{% endblock form %}

{% block result %}
  {% if result_messages %}
    {% if won %}
      <h4>{{ result_messages.0 }}<img src="{{ result_images.0 }}" border=0></h4>
      <h3>{{ result_messages.1 }}</h3>
    {% else %}
      <h4>{{ result_messages.0 }}<img src="{{ result_images.0 }}" border=0>{{ result_messages.1 }}<img src="{{ result_images.1 }}" border=0></h4>
      <h6>{{ result_messages.2 }}</h6>
    {% endif %}
  {% endif %}
{% endblock result %}